<template>
    <div class="tuanbox">
        <div class="nav">
            <div class="nav_box">
                <router-link to="/home/team-t" class="router-link-active">团队风采馆</router-link>
                <el-icon color="#999">
                    <DArrowRight />
                </el-icon>
                <router-link to="/home/team-d" class="router-link-active">党员风采</router-link>
            </div>
        </div>
        <div class="couter">
            <div class="left">
                <el-col :span="24">
                    <el-menu default-active="2" class="el-menu-vertical-demo" router="true"
                        v-for="(item, index) in listdata" :key="index" @click="pavent(item)"
                        :default-openeds="defaultOpenIndex">
                        <el-sub-menu :index="index" :class="acti == item.id ? 'activeitem' : ''">
                            <template #title>
                                <img src="@/assets/minlogo.png" alt="" class="mmm" />
                                <span style="color: red">{{ item.name }} </span>
                            </template>
                            <div class="itemmm" v-for="(ite, ind) in item.children" :key="ind" @click="child(ite)"
                                :class="acti == ite.id ? 'activeitem' : ''">{{
                    ite.name }}</div>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </div>
            <div class="right">
                <div style="display: flex;flex-wrap: wrap; ">
                    <div class="card_cent" v-for="(item, index) in detp" :key="index" @click="detail(item.id)">
                        <div class="card_tou">
                            <div>
                                <img :src="item.avatar" alt="" />
                            </div>
                            <div class="card_name">
                                <h2>
                                    <span>{{ item.nickname }}</span>
                                </h2>
                                <div style="display: flex; justify-content: space-between">
                                    <h3>{{ item.position_text }}</h3>
                                    <div style="color: #999999">{{ item.join_age ? '党龄：' + item.join_age : '' }} </div>
                                </div>
                            </div>
                        </div>
                        <div class="dt" :class="item.style_time ? 'acdt' : 'dt'">{{ item.style_time ? item.style_time +
                    ' 空间动态更新' :
                    "暂无空间动态"
                            }}
                        </div>
                    </div>
                </div>
                <div class="con_bom" v-if="!tabs">
                    <div class="cc">共{{ total }}条</div>
                    <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
                        @next-click="nextclick" @prev-click="prevclick" @change="change1" />
                </div>
                <div class="rq" v-show="tabs">
                    <img src="@/image/容器.svg" alt="" />
                    <div>暂无信息</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { onMounted, ref, reactive } from 'vue'
import { teamdept, deptList } from '@/api/team'
const defaultOpenIndex = ref([0]);
let Router = useRouter()
let listdata: any = ref<any>()
//获取列表
const list = async () => {
    await teamdept().then(res => {
        listdata.value = res.data.data[0].children
    })
}
let data: any = ref<any>({
    dept_id: 10,
    page: 1,
    page_size: 12
})
const kaishi = async () => {
    await deptList(data.value).then(res => {
        console.log(res, '列表数据')
        detp.value = res.data.data.data
        total.value = res.data.data.total
    })
    if (detp.value == !{}) {
        tabs.value = true
    } else {
        tabs.value = false
    }
}
kaishi()
const total = ref(0)
const pageSize = ref(12)
const nextclick = async () => {
    data.value.page++
    kaishi()
}
const prevclick = async () => {
    data.value.page--
    kaishi()
}
const change1 = async (e: any) => {
    data.value.page = e
    kaishi()
}
let tabs = ref(true)
let detp = ref()
//点击父亲列表下拉
let acti = ref(10)
const pavent = async (item: any) => {
    if (item.children == !{}) {
        console.log(1)
        acti.value = item.id
        data.value.dept_id = item.id
        await deptList(data.value).then(res => {
            detp.value = res.data.data.data
            total.value = res.data.data.total
        })
        if (detp.value == !{}) {
            tabs.value = true
        } else {
            tabs.value = false
        }
    }
}
//点击孩子列表下拉
const child = async (ev: any) => {
    console.log(ev.id, 'aaa')
    data.value.dept_id = ev.id
    acti.value = ev.id
    console.log(data.value, 'value')
    await deptList(data.value).then(res => {
        console.log(res, '这是我获取的数据')
        detp.value = res.data.data.data
        total.value = res.data.data.total
    })
    if (detp.value == !{}) {
        tabs.value = true
    } else {
        tabs.value = false
    }
}
//点击跳转到详情页
const detail = (item: any) => {
    console.log(item, 'ds')
    Router.push({ path: '/home/home/team-d/onecen', query: { item } })
}
onMounted(() => {
    list()
})
</script>

<style lang="scss" scoped>
.kong {
    width: 100%;
    height: 100%;
    background: #fff;
}

.card_tou {
    display: flex;
    width: 90%;
    height: 100px;
    // border-bottom: 2px solid #ccc;
    // margin-left: 5%;

    img {
        width: 80px;
        height: 80px;
        margin: 16px;
        border-radius: 50%;
    }

    .card_name {
        flex: 1;
        line-height: 40px;
        // margin-left: 10px;

        h2 {
            margin-top: 10px;

            span {
                padding: 5px 0;
                border-bottom: #767676 2px solid;
                font-size: 16px;
            }
        }

        h3 {
            color: #e02020;
            font-size: 14px;
        }
    }
}

.card_cent {
    width: 383px;
    height: 164px;
    // margin-top: 10px !important;
    border-radius: 2px;
    margin: 10px;
    background: #fff;
    // float: left;
    // display: flex;
    cursor: pointer;
}

.mmm {
    width: 18px;
    height: 18px;
    margin-right: 3px;
}

.el-menu-vertical-demo {
    span {
        color: red;
    }
}

.tuanbox {
    width: 100%;
    background: #f0f0f0;
}

.couter {
    width: 100%;
    display: flex;
    // height: 100vh;

    .left {
        width: 232px;
        // height: 100%;
        background: #fff;
        margin-left: 20px;
        margin-top: 15px;
    }

    .right {
        width: 78%;
        // background: olive;
        margin-left: 20px;
        margin-top: 15px;
        height: 1200px;
        position: relative;
    }
}

.nav {
    height: 54px;
    line-height: 54px;
    background-color: #fff;
    margin-bottom: 16px;

    .nav_box {
        margin-left: 44px;
        font-size: 16px;
        color: #999999;

        .router-link-active {
            font-size: 16px;
            color: #999999 !important;
            text-decoration: none;
        }

        .el-icon {
            margin: 15px 10px 0 10px;
        }
    }
}

.con_bom {
    position: absolute;
    bottom: 50px;
    left: 50%;
    display: flex;
    // margin-left: -100px;
    transform: translateX(-50%);

    .cc {
        width: 100px;
        margin-top: 8px;
        text-align: center;
    }
}

.dt {
    border-top: 2px solid #E5E5E5;
    margin: 10px 20px;
    color: #767676;
    line-height: 45px;
}

.acdt {
    border-top: 2px solid #E5E5E5;
    margin: 10px 20px;
    color: #1A1A1A;
    line-height: 45px;
}

// @media (min-width: 2160px) {
//     .tuanbox {
//         width: 100%;
//         margin: 0 auto;
//         // background-color: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.tuanbox {
    width: 1080px;
    margin: 0 auto;
    // background-color: #f0f0f0;
}

// }

.rq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-top: 100px;
    width: 100%;
    height: 100%;
    background: #fff;

    img {
        width: 228px;
        height: 226px;
    }
}

.itemmm {
    padding: 10px 0px 10px 40px;
    cursor: pointer;
}

.activeitem {
    background: #faa7a74b;
    color: #e02020;
}
</style>
